<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue实现简单图片上传，多张图片上传</title>
    <style>

    </style>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="content">
        <form id="frmTmp">
            <fieldset>
                <legend>选择文件：</legend>
                <input type="file" name="fileUpLoad" id="fileUpLoad" ref="file1" @change="uploadImg($event)" />
            </fieldset>
        </form>
        <div class="uploadInfo">
            <p>上传文件名称：{{fileName}}</p>
            <p>上传文件类型：{{fileType}}</p>
            <p>上传文件大小：{{fileSize}}</p>
            <p>上传文件日期：{{fileDate}}</p>
            <p>上传文件状态：{{fileinfo}}</p>
        </div>
        <div class="uploadPreview">
            <!-- 要限制上传文件类型，使用：accept="text/plain" accept="image/jpeg" 属性 -->
            <img :src="imgSrc" :alt="fileName"/>
        </div>
    </div>

    <script src="../date/dateUtils.js"></script>
    <script>
        var uploadImg = new Vue({
            el: "#content",
            data: {
                fileName: null,    //上传文件名称
                fileType: null,    //上传文件类型
                fileSize: null,    //上传文件大小
                fileDate: null,    //上传文件时间
                fileinfo:null,     //文件上传状态
                imgSrc:null,    //上传文件内容，用于预览
            },
            mounted(){

            },
            methods: {
                //初始化获取当前年月，用于数据初始化
                initYearAndMonth(timpstamp) {
                    let thisDate = dateUtils.timeStamp(timpstamp);
                    let thisDateString = dateUtils.dateObj(thisDate);
                    return thisDateString;
                },
                //文件验证
                rexUploadFile(file){
                    //验证是否是图片
                    var type = /image.*/;   //设定正则表达式 image/jpeg
                    //var type = /text.*/;   //判断文本类型 text/plain
                    if(!file.type.match(type)){
                        return '上传的不是图片，支持jpg、png、gif等图片格式';
                    }
                    return '';
                },
                //清空上传信息
                clearFileInfo(){
                    this.fileName = null;
                    this.fileType = null;
                    this.fileSize = null;
                    this.fileDate = null;
                    this.fileinfo = null;
                    this.$refs.file1.files[0] = null;
                },
                //图片预览，上传回调函数
                imgPreview(file){
                    if (typeof FileReader == "undefiend") {  //如果FileReader对象为未声明
                        alert("您的浏览器不支持图片预览");
                        return;
                    } else {
                        //以数据URL的方式读取文件内容
                        var reader = new FileReader();   
                        //图片预览，用reader的readAsDataURL()方法获取每个图片的内容
                        reader.readAsDataURL(file);   

                        //文件预览，用reader的readAsText()方法获取每个文件的内容
                        //如果出现文件乱码现象，是utf8格式文本所致，使用reader.readAsText(file, 'GB2312'); 即可  
                        //reader.readAsText(file);   

                        //当文件开始加载时触发的回调函数，reader对象在加载时，返回内容
                        reader.onload = (e) => {  
                            //e.target.result用于获取图片路径
                        }
                        
                        //当文件开始读取时触发的回调函数
                        reader.onloadstart = () => {   
                            this.fileinfo = "文件开始读取 ";
                        }
                        //当文件正在读取中触发的回调函数
                        reader.onprogress = () => {   
                            this.fileinfo = "数据正在读取中…… ";
                        }
                        //当文件读取结束后触发的回调函数
                        reader.onloadend =  (e) => {   
                            this.fileinfo = "文件上传完毕 ";

                            //e.target.result用于获取图片路径
                            this.imgSrc = e.target.result;  

                            //获取图片信息
                            this.fileName = file.name;
                            this.fileType = file.type.replace('image/','');
                            this.fileSize = file.size;
                            this.fileDate = this.initYearAndMonth(file.lastModified);
                        }
                        //当文件读取错误时触发的回调函数
                        reader.onerror = (e) => {   
                            /*
                                e.target.error.name 为上传错误名称，可能为如下：
                                    NOT_FOUND_ERR       文件无法找到或源文件已被修改
                                    SECURITY_ERR        由于安全的考虑，无法获取数据文件
                                    ABORT_ERR           触发了abort事件，终止文件读取的过程
                                    NOT_READABLE_ERR    由于权限的原因，不能获取数据文件
                                    ENCODING_ERR        读取的文件太大，超出读取时地址的限制
                            */
                            this.fileinfo = "文件失败！ 错误状态："+e.target.error.name;
                        }
                    }
                },
                //图片上传
                uploadImg() {

                    let file = this.$refs.file1.files[0];

                    //文件验证
                    let rex1 = this.rexUploadFile(file);
                    if(rex1 != ''){
                        return alert(rex1);
                    }

                    //图片预览，上传回调函数
                    this.imgPreview(file);

                    //清空上传信息
                    //this.clearFileInfo();
                }
            }
        });
    </script>
</body>

</html>